<div class="layuimini-container layui-anim layui-anim-upbit">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="" id="form">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <label class="layui-form-label">操作人</label>
                            <div class="layui-input-inline">
                                <input type="text" name="operater" placeholder="请输入用户名" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">关键词</label>
                            <div class="layui-input-inline">
                                <input type="text" name="keyWord" placeholder="请输入搜索关键词" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">选择日期</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="startTime" id="date1" autocomplete="off" class="layui-input">
                            </div>
                            <label style="float: left;padding-top: 4px;padding-right: 4px;">_&nbsp;&nbsp;</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="endTime" id="date2" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"
                                style="width:90px;height:38px;border:none;outline:none;border-radius:6px;background-color:#007bff;color:white"><i
                                    class="layui-icon"></i> 搜 索</button>

                            <!-- <button type="submit" lay-submit="" class="layui-btn layui-btn-warm"
                                lay-filter="data-export-btn"
                                style="width:90px;border-radius:6px;background-color:#26B99A;">
                                <i class="layui-icon"></i> 导 出</button> -->
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>
        <br>
        <div id="table" lay-filter="currentTableFilter">

        </div>
        <div id="page"></div>
    </div>
</div>


<script id="demo" type="text/html">
    <label class="layui-form-label">操作方式</label>
    <div class="layui-input-inline">
        <select name="operateType" lay-filter="clsSelects">
            <option value=''>—全部—</option>
            {{#  layui.each(d, function(index, item){ }}
            <option value={{item.showName}}>{{item.showName}}</option>
            {{#  }); }}
        </select>
    </div>
</script>

<script type="text/html" id="zizeng">
    {{((parseInt(shared.getCookie("page"))-1))*parseInt(shared.getCookie("pageSize"))+ d.LAY_TABLE_INDEX+1}}
   </script>


<script>

shared.setCookie("page",1)
     shared.setCookie("pageSize",10)
    layui.form.render();

    var date1 = new Date(),
        date2 = new Date(date1);
    //-30为30天前，+30可以获得30天后的日期
    date2.setDate(date1.getDate() - 30);
    month = date1.getMonth() + 1
    date = date1.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    nowDay = date1.getFullYear() + "-" + month + "-" + date
    month = date2.getMonth() + 1
    date = date2.getDate()
    if (month < 10) {
        month = "0" + month;
    }
    if (date < 10) {
        date = "0" + date;
    }
    agoDay = date2.getFullYear() + "-" + month + "-" + date
    //form表单
    // layui.form.render();

    //开始日期
    var today = new Date();
    var start = layui.laydate.render({
        elem: '#date1',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        // value: agoDay,
        done: function (value, date, endDate) {
            if (value != "") {
                end.config.min = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                }
            } else { //清空以后最小值
                end.config.min = {
                    year: 1970,
                    month: 1,
                    date: 1
                }
            }
        }
    });

    //结束日期
    var end = layui.laydate.render({
        elem: '#date2',
        calendar: true,
        trigger: 'click',
        max: $("#date2").val(),
        istime: true,
        istoday: true,
        // value: nowDay,
        done: function (value, date) {
            if (value != "") {
                start.config.max = {
                    year: date.year,
                    month: date.month - 1,
                    date: date.date
                }
            } else { //清空以后最大值
                start.config.max = {
                    year: today.getFullYear(),
                    month: today.getMonth(),
                    date: today.getDate()
                }
            }
        }
    });



    var tableBar = [{
            title: '序 号',
            templet:'#zizeng',
            width: '10%',
            align: "center"
        },
        {
            field: 'user_id',
            title: '用  户 名',
            width: '15%',
            align: "center",
            hide:  true
        },
        {
            field: 'str_query',
            title: '关键词',
            width: '30%',
            align: "center"
        },
        {
            field: 'user_name',
            title: '操作人',
            width: '30%',
            align: "center"
        },
        {
            field: 'create_time',
            title: '检索时间',
            width: '30%',
            align: "center"
        }
    ]

    var initTableParams = {
        "operater": "",
        "keyWord":"",
        "startTime": $("#date1").val(),
        "endTime": $("#date2").val(),
        "orderType": "create_time",
        "orderValue": "desc",
        "page": 1,
        "pageSize": 10
    }


    //封装 表格渲染方法
    function tableRender(tableBar, initTableParams) {
  
        layuiEx.tableRender(
            "/keyWord/cutPageKeyWord",
            'table',
            'page',
            tableBar,
            initTableParams
        );
    }

    tableRender(tableBar, initTableParams)

    //检索事件
    layui.form.on('submit(data-search-btn)', function (params) {
        shared.setCookie("page", 1)
        shared.setCookie("pageSize",10)
        layuiEx.tableRender(
            "/keyWord/cutPageKeyWord",
            'table',
            'page',
            tableBar, {
                "keyWord": params.field.keyWord,
                "operater": params.field.operater,
                "startTime": $("#date1").val(),
                "endTime": $("#date2").val(),
                "orderType": "create_time",
                "orderValue": "desc",
                "page": 1,
                "pageSize": 10
            }
        );
       return false

    })

    //监听导出按钮
    // layui.form.on('submit(data-export-btn)', function (data) {
    //     var operateType = data.field.operateType
    //     var operater = data.field.operater
    //     var startTime = $("#date1").val()
    //     var endTime = $("#date2").val()
    //     var orderType = "创建时间"
    //     var orderValue = "desc"
    //     var url = config.server + "/keyWord/cutPageKeyWord?startTime=" + startTime + "&endTime=" + endTime +
    //         "&orderType=" + orderType + "&orderValue=" + orderValue + "&operateType=" + operateType +
    //         "&operater=" + operater
    //     window.location.href = url;
    //     return false;
    // });
</script>